<template>
  <div class="container">
  <el-row type='flex' justify="space-between" class="row-bg">
    <el-col :span='6'>
      <span class="all" >{{getUrlSearch('cat')==null?"全部":getUrlSearch('cat')}}</span>
      <el-button  size="mini" plain class="btn1" @click="show = !show">
           <i >选择分类</i>
      <em class="el-icon-arrow-down"></em>
        </el-button>
    </el-col>
    <el-col :span="0.5">
      <el-button size="mini" type="danger" @click="changePage">热门</el-button>
    </el-col>
  </el-row>

  <!-- 弹框 -->
 <div class="all-style" v-if="show">
   <span class="saojiaoxing">
     <em class="el-icon-caret-top">
     </em>
      </span>
   <el-row class="one">
      <el-button size="mini" @click="btnAll">全部风格</el-button>
   </el-row>
   <div  style="display:flex" v-for="count in this.allList.length" :key="count">
     <div class="category" style="flex:1.3">
       <span class="title-style">{{allList[count-1]}}</span>
      </div>
     <div class="all-type" style="flex:8"  >
       <span v-for="(index2,val) in GetsubList(count-1)" :key="index2">
         <a :href="'?cat='+GetsubList(count-1)[val].name">{{GetsubList(count-1)[val].name}}</a> &nbsp;|
        </span>
     </div>
   </div>
  </div>

<!-- 歌单列表 -->
<div class="flex_content">
  <SongItem  v-loading="loading" v-for="obj in playLists" :key="obj.id" :Songid="obj.id" :songPlayList="obj" />
</div>
<br>
<br>
  <!-- 分页 -->
  <el-pagination background style="text-align: center"
  layout="prev, pager, next"
  :total="this.page.total"
  :page-size="35"
  @current-change="currentChange">
</el-pagination>

  </div>
</template>

<script>
import SongItem from './components/SongItem.vue'
import { ListHot, PlayListHot, PlayList } from '@/api/SongList'
export default {
  name: 'SongList',
  components: {
    SongItem
  },
  data () {
    return {
      show: false,
      playLists: [],
      allList: [],
      subList: [],
      page: {
        page: 1,
        offset: 35,
        total: 0
      },
      loading: false
    }
  },
  created () {
    this.ListHot(0)
    this.PlayListHot()
    this.PlayList()
    // this.btnCheck(id)
  },
  // computeds: {
  //   showTitle () {
  //     return this.title ? '主页' : this.title.cat.vaule
  //   }
  // },
  methods: {
    changePage () {
      window.location.href = window.location.href + '&order=hot'
    },
    async ListHot (offset) {
      const res = await ListHot({
        limit: 35,
        offset: offset,
        cat: this.getUrlSearch('cat') == null ? '全部' : this.getUrlSearch('cat')
      })
      this.page.total = res.data.total
      // console.log(res)
      this.playLists = res.data.playlists
    },
    async PlayListHot () {
      const res = await PlayListHot()
      // console.log(res)
      this.tagsList = res.data.tags
    },
    async PlayList () {
      const res = await PlayList()
      console.log(res)
      this.allList = Object.values(res.data.categories)
      this.subList = res.data.sub
      // console.log(this.subList.filter(item => item.category === 1))
    },
    btnAll () {
      try {
        this.ListHot()
        this.show = false
      } catch (error) {
        console.log(error)
      }
    },
    currentChange (val) {
      this.playLists = []
      this.ListHot((val - 1) * 35)
    },
    GetsubList (category) {
      // console.log(this.sub List.filter(item => item.category === category))
      return this.subList.filter(item => item.category === category)
    },
    getUrlSearch (name) {
    // 未传参，返回空
      if (!name) return null
      // 查询参数：先通过search取值，如果取不到就通过hash来取
      var after = window.location.search
      after = after.substr(1) || window.location.hash.split('?')[1]
      // 地址栏URL没有查询参数，返回空
      if (!after) return null
      // 如果查询参数中没有"name"，返回空
      if (after.indexOf(name) === -1) return null

      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      // 当地址栏参数存在中文时，需要解码，不然会乱码
      var r = decodeURI(after).match(reg)
      // 如果url中"name"没有值，返回空
      if (!r) return null

      return r[2]
    }

  }
}

</script>

<style lang="less" scoped>

.container{
  a:hover{
    text-decoration:underlin;
  }
  padding: 40px 28px 0 28px;
  .row-bg{
  padding-bottom: 5px !important;
  border-bottom: 3px solid red;
position: relative;
  }
  /deep/ .all{
    font-size: 24px;
    color: #333;
    vertical-align: middle;
  }
 /deep/ .btn1{
    margin-left:  12px !important;

    i{
      color:#0c73c2 !important ;
    }
    .el-icon-arrow-down{
      color:#0c73c2 !important ;

    }
    /deep/ .el-pager li .number{
     .active{
        background: red !important;
      }
    }

  }
  .all-style{
    position: absolute;
    left: 215px;
    top: 179px;
    width: 700px;
    height: 400px;
    margin-top: 10px ;
    background-color: #f1f1f1;
    border-radius:5px;
    z-index: 1;
  }
  .saojiaoxing {
    position: absolute;
    top: -14px;
    left: 100px;
    color: red;

  }
  .one{
    padding: 12px 0px 12px 15px;
    border-bottom: 1px solid #e6e6e6;
  }
  .flex_content{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .category{
      text-align: center;
      border-right:1px solid #e6e6e6;
      font-size: 16px;
      padding-top:25px ;

  }
  .all-type{
     padding: 25px -0 0px 26px;

  }
  .all-type span a{
    font-size: 14px !important;
    // text-decoration:none;
  }

}
</style>
